<template>
	<view>
		<uNavbar title="支付中心"></uNavbar>
		<view class="pay_money flex_ZC">
			<text class="f32">实付金额（{{this.payType ==5?'FUL':'元'}}）</text>
			<text >{{ calculatePrice()}}</text>
			<!-- <u-count-down v-if="productType == 2 " :time="payEnd" format=" HH:mm:ss"></u-count-down> -->
		</view>

		<view class="pay_box flex_Z">
			<text>请选择支付方式</text>
			<view class="pay_type flex_Z" v-if="pay1" @click="isFhtb">
				<view class="balance flex_dq">
					<view class="pay_type_l flex_c">
						<u-icon v-if="!fhtb" name="checkmark-circle" color="#cccccc" size="24" ></u-icon>
						<u-icon v-else name="checkmark-circle-fill" color="#FF2CDF" size="24" ></u-icon>
					</view>
					<view class="balance_top flex_dq">
						<image class="img1" src="../../static/icon/fhtb.png" mode=""></image>
						<text >福合通宝</text>
					</view>
				</view>
				<text  class="available">可用：{{balance}}</text>
			</view>
			
			<view class="pay_type flex_Z" v-if="pay2" @click="isYuanshi">
				<view class="balance flex_dq">
					<view class="pay_type_l flex_c">
						<u-icon v-if="!yuans" name="checkmark-circle" color="#cccccc" size="24" ></u-icon>
						<u-icon v-else name="checkmark-circle-fill" color="#FF2CDF" size="24"></u-icon>
					</view>
					<view class="balance_top flex_dq">
						<image  class="img1" src="../../static/icon/i_ys.png" mode=""></image>
						<text >FH原石</text>
					</view>
				</view>
				<text  class="available">可用：{{FhBalance}}</text>
			</view>
			
			<view class="pay_type flex_Z" v-if="fulPay && pay3 "  @click="isFul">
				<view class="balance flex_dq">
					<view class="pay_type_l flex_c">
						<u-icon v-if="!ful" name="checkmark-circle" color="#cccccc" size="24" ></u-icon>
						<u-icon v-else name="checkmark-circle-fill" color="#FF2CDF" size="24"></u-icon>
					</view>
					<view class="balance_top flex_dq">
						<image  class="img1" src="../../static/icon/i_ful.png" mode=""></image>
						<text >FUL余额</text>
					</view>
				</view>
				<text  class="available">可用：{{FulBalance}}</text>
			</view>
			<!-- 
			<view class="pay_type flex_Z">
				<view class="balance flex_dq">
					<view class="pay_type_l flex_c">
						<u-icon v-if="!ldys" name="checkmark-circle" color="#cccccc" size="24" @click="isLdys"></u-icon>
						<u-icon v-else name="checkmark-circle-fill" color="#FF2CDF" size="24" @click="isLdys"></u-icon>
					</view>
					<view class="balance_top flex_dq">
						<image class="img3" src="../../static/icon/ldys.png" mode=""></image>
						<text>联动优势钱包</text>
					</view>
				</view>
			</view> -->
		</view>

		<view class="submit flex_c" @click="confirmShow">
			<image class="highlights" src="../../static/image/mask.png" mode=""></image>
			<text>确认下单</text>
		</view>
		<view class="notice flex_Z">
			<text class="f36 c4">购买需知</text>
			<rich-text v-if="productType == 1" class="notice_txt f24 c4" :nodes="totalDetail.notice"></rich-text>
			<rich-text v-if="productType == 2 || productType == 5 || productType==3" class="notice_txt f24 c4" :nodes="notices"></rich-text>
		</view>

		<u-keyboard ref="uKeyboard" dotDisabled mode="number" closeOnClickOverlay :tooltip="false" :show="keyboardShow"
			@close="keyboardShow = false" @change="valChange" @backspace="backspace">
			<view class="keyboardss flex_ZC">
				<text>安全密码</text>
				<u-code-input dot space="26" v-model="securityPwd"></u-code-input>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	import {getuserinfo} from "../../api/index.js";
	import {createOrder,goodsCreateHatchOrder,rentCreateOrder,rentOrdersPay,rentOrderInfo,proporderInfo,proppay,rentCreateHatchOrder,} from "../../api/store.js";
	export default {
		data() {
			return {
				balance:0,//余额
				FhBalance:'',//原石
				FulBalance:0, //ful
				productType:'',//1平台首发 2-自由市场  3道具 4品牌首发 5品牌孵化 
				securityPwd: '', //安全密码
				proportion:'',//ful支付比例
				keyboardShow: false, //输入框
				totalDetail: {},//总信息
				orderSn:'', //创建订单
				freeAllMoney:0.00,
				C:'',
				payEnd :'',
				rentid:'',
				fulPay:0,//是否可以ful支付
				payType:3,//3 福合通宝 、4原石
				fhtb: true,
				yuans: false,
				ful: false,
				paytypes:null,
				pay1:true,
				pay2:true,
				pay3:true,
				notices:"",
				pid:"",
				number:"",
				selectId:[]
				// ldys: false,
			}
		},
		onLoad(e) {
			console.log(e);
			this.getuser()
			
			console.log(this.pid,this.number)
			this.productType = e.productType
			this.fulPay = Number(e.fulPay)
			
			if(this.productType == 1){
				this.totalDetail = uni.getStorageSync('allPage') || ''
				console.log(this.totalDetail);
			}else if(this.productType == 2 ){
				this.selectId=uni.getStorageSync("selectId")
				// this.rentid = e.order_id
				this.freeAllMoney=e.total
				// this.isRentOrderInfo()
			}else if(this.productType == 4){
				this.totalDetail = uni.getStorageSync('allPage') || ''
				console.log(this.totalDetail);
			}else if(this.productType == 3){
				this.rentid=e.order_id
				this.getpropinfo()
			}else if(this.productType==5){
				this.pid=e.pid
				this.number=e.number
				this.freeAllMoney=e.total
				this.notices=uni.getStorageSync("noticess")
			}
		},
		methods: {
			calculatePrice(){
				console.log('跳转方式',this.productType);
				console.log('支付方式',this.payType);
				if(this.productType == '1' || this.productType == '4'){
					if(this.payType == '5'){
						// 5 ful支付、保留6位小数
						return (this.totalDetail.allMoney/this.proportion).toFixed(6)
					}else{
						return this.totalDetail.allMoney
					}
				}else{
					if(this.payType == '5'){
						return (this.freeAllMoney/this.freeAllMoney).toFixed(6)
					}else{
						return this.freeAllMoney
					}
				}
			},
			getpropinfo(){
				uni.showLoading({
					title: '加载中'
				});
				proporderInfo({
					id:this.rentid
				}).then(res=>{
					
					if(res.code==1){
						console.log(res)
						uni.hideLoading()
						this.orderSn = res.data.order_sn
						this.payEnd = res.data.pay_countdown * 1000
						this.freeAllMoney =  res.data.price
						this.paytypes= JSON.parse(res.data.prop.is_pay) 
						let pay1=  this.paytypes.includes("3")
						let pay2 = this.paytypes.includes("4");
						let pay3 = this.paytypes.includes("5");
						// this.paytypes.forEach(function(value) {
						this.pay1 = pay1 ? true : false;
						this.pay2 = pay2 ? true : false;
						this.pay3 = pay3 ? true : false;
						console.log(pay1,pay2)
						// });
						console.log(this.paytypes)
						this.notices = res.data.prop.purchase_info
					}
				})
			},
			rentCreateOrders(){
				uni.showLoading({
					title: '抢购排队中，请等待'
				});
				rentCreateOrder({
						id: this.selectId.join(','),
						pay_type:this.payType,
						password:this.securityPwd,
						
				}).then(res=>{
					uni.hideLoading()
					this.securityPwd = ''
					uni.$u.toast(res.msg);
					if(res.code == 1){
						setTimeout(function() {
							uni.redirectTo({
								url: '/pagesMy/mallCenter/paySuccess?id=' + 1 + '&type=' +2
							})
						}, 1500);
					}else{
						uni.$u.toast(res.msg);
					}
				})
			},
			//自由市场订单详情
			// isRentOrderInfo() {
			// 	let data = {
			// 		id:this.rentid 
			// 	}
			// 	uni.showLoading({
			// 		title: '加载中'
			// 	});
			// 	rentOrderInfo(data).then(res => {
			// 		console.log(res)
			// 		uni.hideLoading()
			// 		this.orderSn = res.data.order_sn
			// 		this.payEnd = res.data.pay_countdown * 1000
			// 		this.freeAllMoney =  res.data.price
			// 		this.notices = res.data.rent_orders_goods[0].goods.purchase_info
			// 	})
			// },
			// 用户信息
			getuser() {
				getuserinfo().then(res => {
					console.log(res)
					this.balance = res.data.balance
					this.FhBalance = res.data.balance_hf
					console.log(this.FhBalance);
					console.log(Number(this.FhBalance));
					this.FulBalance = res.data.balance_ful
					this.proportion = res.data.ufl_rmb_prop
				})
			},
			confirmShow(){
				console.log('跳转方式',this.productType);
				console.log('支付方式',this.payType);
				if(this.productType == 1 ||this.productType == 4){ //平台首发、品牌首发
					 if(this.payType == 3){
						if(Number(this.totalDetail.allMoney)>Number(this.balance)){
							uni.$u.toast('余额不足');
						}else{
							this.keyboardShow = true
						}
					}else if(this.payType == 4){
						if(Number(this.totalDetail.allMoney)>Number(this.FhBalance)){
							uni.$u.toast('FH原石不足');
						}else{
							this.keyboardShow = true
						}
					}else{
						console.log(Number(this.totalDetail.allMoney/100));
						console.log(Number(this.FulBalance));
						if(Number(this.totalDetail.allMoney/10)>Number(this.FulBalance)){
							uni.$u.toast('Ful余额不足');
						}else{
							this.keyboardShow = true
						}
					}
					
				}else if(this.productType == 2 || this.productType == 5 ||this.productType==3){ // 自由市场支付  孵化市场
					if(this.payType == 3){
						if(Number(this.freeAllMoney)>Number(this.balance)){
							uni.$u.toast('余额不足');
						}else{
							this.keyboardShow = true
						}
					}else if(this.payType == 4){
						if(Number(this.freeAllMoney)>Number(this.FhBalance)){
							uni.$u.toast('FH原石不足');
						}else{
							this.keyboardShow = true
						}
					}else{
						if(Number(this.totalDetail.allMoney/10)>Number(this.FulBalance)){
							uni.$u.toast('Ful余额不足');
						}else{
							this.keyboardShow = true
						}
					}
				}
			},
			// 输入密码
			valChange(val) {
				if (this.securityPwd.length <= 6) {
					this.securityPwd += val;
					console.log(this.securityPwd);
				}
				if (this.securityPwd.length >= 6) {
					this.keyboardShow = false
					if(this.productType == 1 ){
						this.isCreateOrder()
					}else if(this.productType == 4 ){
						this.isgoodsCreateHatchOrder()
						console.log('孵化专区创建订单并支付');
					}else if(this.productType == 2 ) {
						// this.isRentOrdersPay()
						this.rentCreateOrders()
					}else if(this.productType==3){
						this.proppays()
					}else if(this.productType==5){
						this.payfhdt()
					}
				}
			},
			payfhdt(){
				uni.showLoading({
					title: '抢购排队中，请等待'
				});
				rentCreateHatchOrder({
					id:this.pid,
					number:this.number,
					pay_type:this.payType,
					password:this.securityPwd
				}).then(res=>{
					uni.hideLoading()
					this.securityPwd=""
					uni.$u.toast(res.msg);
					if(res.code == 1){
						setTimeout(function() {
							uni.redirectTo({
								url: '/pagesMy/mallCenter/paySuccess?id=' + 1 + '&type=' +2
							})
						}, 1500);
					}else{
						uni.$u.toast(res.msg);
					}
				})
			},
			proppays(){
				uni.showLoading({
					title: '抢购排队中，请等待'
				});
				proppay({
					order_sn:this.orderSn,
					pay_type:this.payType,
					password:this.securityPwd			
				}).then(res=>{
					uni.hideLoading()
					this.securityPwd = ''
					if(res.code==1){
						setTimeout(function() {
							uni.redirectTo({
								url: '/pagesMy/mallCenter/paySuccess?type=' + 3
							})
						}, 1500);
					}
					uni.$u.toast(res.msg);
				})
			},

			// 平台首发创建订单并支付
			isCreateOrder() {
				let data = {
					goods_id: this.totalDetail.selectId,
					pay_type:this.payType,
					number: this.totalDetail.numbers,
					password: this.securityPwd,
				};
				uni.showLoading({
					title: '抢购排队中，请等待'
				});
				createOrder(data).then(res => {
					console.log(res)
					uni.hideLoading()
					this.securityPwd = ''
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						setTimeout(function() {
							uni.redirectTo({
								url: '/pagesMy/mallCenter/paySuccess?type=' + 1
							})
						}, 1500);
					}else{
						uni.$u.toast(res.msg);
					}
				})
			},
			//孵化专区创建订单并支付
			isgoodsCreateHatchOrder() {
				let data = {
					goods_id: this.totalDetail.selectId,
					pay_type:this.payType,
					number: this.totalDetail.numbers,
					password: this.securityPwd,
				};
				uni.showLoading({
					title: '抢购排队中，请等待'
				});
				goodsCreateHatchOrder(data).then(res => {
					console.log(res)
					uni.hideLoading()
					this.securityPwd = ''
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						setTimeout(function() {
							uni.redirectTo({
								url: '/pagesMy/mallCenter/paySuccess?type=' + 1
							})
						}, 1500);
					}else{
						uni.$u.toast(res.msg);
					}
				})
			},
			// 自由市场订单支付
			isRentOrdersPay() {
				let data = {
					// order_sn:this.orderSn,
					id: this.selectId.join(','),
					pay_type:this.payType,
					password:this.securityPwd,
				}
				uni.showLoading({
					title: '抢购排队中，请等待'
				});
				rentOrdersPay(data).then(res => {
					console.log(res)
					uni.hideLoading()
					this.securityPwd = ''
					uni.$u.toast(res.msg);
					if(res.code == 1){
						setTimeout(function() {
							uni.redirectTo({
								url: '/pagesMy/mallCenter/paySuccess?id=' + 1 + '&type=' +2
							})
						}, 1500);
					}else{
						uni.$u.toast(res.msg);
					}
				})
			},

			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.securityPwd.length) this.securityPwd = this.securityPwd.substr(0, this.securityPwd.length - 1);
				console.log(this.securityPwd);
			},

			isFhtb() {
				if(!this.fhtb){
					this.fhtb = !this.fhtb
					this.yuans = false
					this.ful = false
					this.payType = 3
				}
				
			},
			isYuanshi() {
				if(!this.yuans){
					this.yuans = !this.yuans
					this.fhtb = false
					this.ful = false
					this.payType = 4
				}
			},
			isFul(){
				if(!this.ful){
					this.ful = !this.ful
					this.fhtb = false
					this.yuans = false
					this.payType = 5
				}
			}
		},
	}
</script>
<style>
	page {
		background: #211E38;
	}
</style>
<style scoped>
	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	.pay_money {
		width: 100%;
		margin-top: 100rpx;
		color: #ffffff;
	}

	.pay_money>text:nth-child(2) {
		font-size: 90rpx;
		margin: 20rpx 0;
	}

	.pay_box {
		margin-top: 50rpx;
	}

	.pay_box>text {
		color: #ffffff60;
		font-size: 24rpx;
		margin: 20rpx 30rpx;
	}

	.pay_type {
		width: 690rpx;
		background: #353267;
		border-radius: 14rpx;
		margin: 0 auto 24rpx;
	}

	.img1 {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.img2 {
		width: 54rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.img3 {
		width: 60rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.pay_type_l {
		width: 20%;
		/* background: pink; */
	}

	.balance {
		width: 100%;
	}

	.balance_top {
		width: 70%;
		padding: 30rpx 0;
		font-size: 32rpx;
		color: #ffffff;
		font-family: 'iconfont';
		border-bottom: 1rpx solid #ffffff10;
	}

	.available {
		font-size: 28rpx;
		color: #FF2CDF;
		padding: 20rpx 0;
		margin-left: 140rpx;
	}


	.submit {
		position: relative;
		width: 92%;
		margin: 80rpx auto 30rpx;
	}
	.submit>text {
		text-align: center;
		width: 100%;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}

	.notice {
		width: 590rpx;
		margin: 0 auto;
		/* background: pink; */
	}

	.notice>text {
		margin: 20rpx 0;
	}

	.notice_txt {
		line-height: 1.5;
	}

	.keyboardss {
		width: 690rpx;
		margin: 20rpx auto;
	}

	/deep/.u-code-input {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 100%;
		margin: 20rpx 0;
		/* background: pink; */
	}
	/deep/.u-code-input__item{
		margin-right: 0px !important;
	}
</style>